<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view>{{ item.title }}</view>
        <view class="dwbox" @click="download(item)">
          <image src="../../static/icon/download.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 6rpx"></image>
          <text>下载</text>
        </view>
      </view>
    </scroll-view>

    <uni-popup ref="buy" type="center">
      <view class="box">
        <uni-icons type="close" size="20" style="display: flex; justify-content: flex-end" @click="$refs.buy.close()"></uni-icons>
        <view style="text-align: center; font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">提示</view>
        <view style="display: flex; justify-content: space-between; margin-top: 72rpx">
          <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">直接购买</view>
          <view class="buybox">9.9元</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      imgUrl: '',
      title: '',
      currentid: '',
      list: []
    };
  },
  methods: {
    // 获取可下载的资料
    async getdata(id) {
      const res = await uni.$http.post('/news/articleList', {
        type: 'teacher',
        page: this.page,
        title: this.title,
        category_id: id
      });
      if (res.data.data.list.length != 0) {
        this.list.push(...res.data.data.list);
      } else {
        uni.showToast({
          title: '数据已加载完毕',
          icon: 'none'
        });
      }
    },
    // 下载
    download(item) {
      if (item.pic != '') {
        uni.downloadFile({
          url: this.imgUrl + item.pic,
          success: (res) => {
            console.log('下载资料', res);
            if (res.statusCode == 200) {
              //uni.getFileSystemManager().
              uni.getFileSystemManager().saveFile({
                tempFilePath: res.tempFilePath,
                success: (res2) => {
                  console.log('保存文件', res2);
                  uni.openDocument({
                    showMenu: true,
                    filePath: res2.savedFilePath,
                    success: (res3) => console.log('成功打开文档')
                  });
                }
              });
              uni.$http.post('/news/download', {
                type: '2',
                article_id: item.id,
                title: item.title,
                path: item.pic
              });
            }
          }
        });
        console.log(item);
      } else {
        return uni.showToast({
          title: '暂无资料可下载',
          icon: 'none'
        });
      }
    }
  },
  onLoad(e) {
    this.imgUrl = this.imgurl;
    console.log('传递的id', e.id);
    if (e.id) {
      this.currentid = e.id;
      this.getdata(e.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx;
    padding: 40rpx 0;
    border-bottom: 2rpx solid #f1f1f1;
    .dwbox {
      box-sizing: border-box;
      width: 122rpx;
      height: 48rpx;
      text-align: center;
      line-height: 48rpx;
      background: #3553e8;
      color: #fff;
      font-size: 26rpx;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
  }
  .box {
    box-sizing: border-box;
    width: 510rpx;
    height: 306rpx;
    padding: 20rpx 35rpx;
    border-radius: 20rpx;
    background: linear-gradient(162deg, #dbe1ff 0%, #eaeeff 49%, #ffffff 100%);
    .buybox {
      width: 140rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      background: #3553e8;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
